package com.example.ex4// 替换为你的包名

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.ex4.R

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TopicGridAppTheme { // 使用你的主题名称
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    TopicGrid()
                }
            }
        }
    }
}

// --- 1. 数据模型 ---
data class Topic(
    val name: String,
    val availableCourses: Int,
    @DrawableRes val imageRes: Int
)


// 模拟数据源 (实际开发中通常图片放在 res/drawable 文件夹下)
// 注意：为了代码能运行，你需要确保 drawable 文件夹里有相应的图片
// 这里用 ic_launcher_background 暂时替代，请替换为你自己的图片资源ID
val topics = listOf(
    Topic("Architecture", 58, R.drawable.architecture),
    Topic("Automotive", 0, R.drawable.automotive),
    Topic("Biology", 0, R.drawable.biology),
    Topic("Business", 78, R.drawable.business),
    Topic("Crafts", 121, R.drawable.crafts),
    Topic("Culinary", 118, R.drawable.culinary),
    Topic("Design", 423, R.drawable.design),
    Topic("Drawing", 326, R.drawable.drawing),
    Topic("Ecology", 0, R.drawable.ecology),
    Topic("Engineering", 0, R.drawable.engineering),
    //Topic("Fashion", 92, R.drawable.fashion),  // 使用 fastion 文件名
    //Topic("Film", 165, R.drawable.film),
    //Topic("Finance", 0, R.drawable.finance),
    //Topic("Gaming", 164, R.drawable.gaming),
    //Topic("Geology", 0, R.drawable.geology),
    //Topic("History", 0, R.drawable.history),
    //Topic("Journalism", 0, R.drawable.journalism),
    //Topic("Law", 0, R.drawable.law),
    //Topic("Lifestyle", 305, R.drawable.lifestyle),
    //Topic("Music", 212, R.drawable.music),
    //Topic("Painting", 172, R.drawable.painting),
    //Topic("Photography", 321, R.drawable.photography),
    //Topic("Physics", 0, R.drawable.physics),
    //Topic("Tech", 118, R.drawable.tech)
)

// --- 2. UI 组件实现 ---

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2), // 固定两列
        verticalArrangement = Arrangement.spacedBy(8.dp), // 垂直间距
        horizontalArrangement = Arrangement.spacedBy(8.dp), // 水平间距
        modifier = modifier.padding(8.dp) // 整体外边距
    ) {
        items(topics) { topic ->
            TopicCard(topic)
        }
    }
}

@Composable
fun TopicCard(topic: Topic, modifier: Modifier = Modifier) {
    Card(
        shape = RoundedCornerShape(8.dp), // 卡片圆角 (根据UI看不太明显，给了个常规值)
        modifier = modifier
            .height(68.dp) // 严格按照UI图：卡片高度 68dp
    ) {
        Row(modifier = Modifier.fillMaxSize()) {
            // 左侧：图片
            Image(
                painter = painterResource(id = topic.imageRes),
                contentDescription = topic.name,
                modifier = Modifier
                    .size(68.dp), // 严格按照UI图：图片宽高 68dp
                contentScale = ContentScale.Crop
            )

            // 右侧：文字信息
            Column(
                modifier = Modifier
                    .padding(start = 16.dp, top = 16.dp, end = 16.dp) // 按照UI图标注的 Padding
            ) {
                // 标题
                Text(
                    text = topic.name,
                    style = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier.padding(bottom = 8.dp) // 标题和下方数字的间距 8dp
                )

                // 图标 + 数字
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_grain), // 这里用系统自带图标代替那个六个点的图标
                        contentDescription = null,
                        modifier = Modifier.padding(end = 8.dp).size(16.dp) // 图标和数字间距 8dp
                    )
                    Text(
                        text = topic.availableCourses.toString(),
                        style = MaterialTheme.typography.labelMedium
                    )
                }
            }
        }
    }
}

// --- 3. 预览 ---
@Preview(showBackground = true)
@Composable
fun TopicCardPreview() {
    // 创建一个假的主题用于预览
    TopicGridAppTheme {
        val sampleTopic = Topic("Photography", 321, R.drawable.ic_grain)
        TopicCard(topic = sampleTopic)
    }
}

// 简单的主题包裹，防止复制报错
@Composable
fun TopicGridAppTheme(content: @Composable () -> Unit) {
    MaterialTheme(content = content)
}